<template>
    <div>
        <keep-alive>
            <carousel :banner="banner" :carouseTime="carouseTime" :active="activeIndex" direction="left"
                @downloadHandle="downloadHandle" />
        </keep-alive>
        <div class="discovers">
            <!-- 左侧 -->
            <div class="dis_left" style="background-color: blue;">
                <!-- 热门推荐 -->
                 <option-title :list="list" :more="more" :title="title"/>
                <!-- 热门推荐 -->


                <ul class="music-box">
                    <li>
                        <div class="u-cover">
                            <img :src="require('@/assets/image/109951164297690587.jpg')" alt="">
                            <div class="u-cover-bottom">
                                <span class="icon-headset"></span>
                                <span class="num">118万</span>
                                <a href="#" class="icon-play"></a>
                            </div>
                        </div>
                        <p>“其实无论怎么选择，都会有遗憾的对吧”</p>
                    </li>

                    <!-- <li>
                    <div class="u-cover">
                        <img src="../images/109951166945083815.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">118万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>伤感歌单｜我也不是一定非你不可</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951167284879173.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">3472万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>最荒谬 | 爱笑的女孩不适合潜水——记一次差点儿死在海底的经历</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951166373207818.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">118万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>好心情营业ing✨笑迎生活点滴温暖好心情营业ing✨笑迎生活点滴温暖</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951163128461676.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">2075万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>古典清香 I 我的茶馆里住着巴赫与肖邦</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951165440544522.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">685万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>天气不似预期</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951167316546712.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">11万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>出道即巅峰 | 罗大佑出道40周年特辑（上）</p>
                </li>

                <li>
                    <div class="u-cover">
                        <img src="../images/109951167194903642.jpg" alt="">
                        <div class="u-cover-bottom">
                            <span class="icon-headset"></span>
                            <span class="num">1658万</span>
                            <a href="#" class="icon-play"></a>
                        </div>
                    </div>
                    <p>又潮又土又嗨 咚鼓 DJ 热曲</p>
                </li> -->
                </ul>

                <option-title  :more="more" title="新碟上架"/>

                <!-- <div class="inner">

                <div class="left">&lt;</div>
                <div class="right">&gt;</div>

                <div class="swiper">
                    <ul class="swiper-item">
                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                    <a href="#" class="icon-play"></a>
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗1</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167277673214.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗2</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167256445254.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗3</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗4</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗5</p>
                            </div>
                        </li>

                    </ul>


                    <ul class="swiper-item">
                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                    <a href="#" class="icon-play"></a>
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗6</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗7</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗8</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗9</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗10</p>
                            </div>
                        </li>

                    </ul>

                    <ul class="swiper-item">
                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                    <a href="#" class="icon-play"></a>
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗11</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗12</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗13</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗14</p>
                            </div>
                        </li>

                        <li>
                            <div class="cicl">
                                <div class="j-img">
                                    <img src="../images/109951167262791011.jpg" alt="">
                                </div>
                                <p class="thied">Slow Ride (兜风)</p>
                                <p class="name">鹿晗15</p>
                            </div>
                        </li>

                    </ul>

                </div>



            </div> -->

                <div class="option-title m-top">
                    <a class="title-item">榜单</a>

                    <div class="more">
                        更多
                        <li></li>
                    </div>
                </div>

                <!-- <div class="card">
                <div class="card-item">
                    <div class="item-top">
                        <div class="top-left">
                            <img src="../images/109951166952713766.jpg" alt="">
                            <a href="#"></a>
                        </div>
                        <div class="top-right">
                            <div class="tit"><a href="#" title="飙升榜">飙升榜</a></div>
                            <div class="btn">
                                <a href="#" title="播放"></a>
                                <a href="#" title="收藏"></a>
                            </div>
                        </div>
                    </div>
                    <ol>
                        <li>
                            <span style="color:#c10d0c;">1</span>
                            <a href="#"><i>征程</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">2</span>
                            <a href="#"><i>花泥</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">3</span>
                            <a href="#"><i>女孩</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <a href="#"><i>冯京与马凉</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <a href="#"><i>告诉你我多想你</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>6</span>
                            <a href="#"><i>爱上未来的你</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>7</span>
                            <a href="#"><i>回避型恋爱人格</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>8</span>
                            <a href="#"><i>Wait a Minute!</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>9</span>
                            <a href="#"><i>一不小心爱上你</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>10</span>
                            <a href="#"><i>失语病</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <a href="#">查看更多&gt;</a>
                        </li>
                    </ol>

                </div>

                <div class="card-item">
                    <div class="item-top">
                        <div class="top-left">
                            <img src="../images/109951166952686384.jpg" alt="">
                            <a href="#"></a>
                        </div>
                        <div class="top-right">
                            <div class="tit"><a href="#" title="飙升榜">新歌榜</a></div>
                            <div class="btn">
                                <a href="#" title="播放"></a>
                                <a href="#" title="收藏"></a>
                            </div>
                        </div>
                    </div>
                    <ol>
                        <li>
                            <span style="color:#c10d0c;">1</span>
                            <a href="#"><i>靠近 (Live)</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">2</span>
                            <a href="#"><i>流浪</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">3</span>
                            <a href="#"><i>可惜我们</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <a href="#"><i>梁山伯与茱丽叶</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <a href="#"><i>如果爱忘了</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>6</span>
                            <a href="#"><i>Lydia</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>7</span>
                            <a href="#"><i>再等冬天(Memories)</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>8</span>
                            <a href="#"><i>麦浪</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>9</span>
                            <a href="#"><i>一不小心爱上你</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>10</span>
                            <a href="#"><i>平行线</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <a href="#">查看更多&gt;</a>
                        </li>
                    </ol>

                </div>

                <div class="card-item">
                    <div class="item-top">
                        <div class="top-left">
                            <img src="../images/109951166961388699.jpg" alt="">
                            <a href="#"></a>
                        </div>
                        <div class="top-right">
                            <div class="tit"><a href="#" title="飙升榜">原创榜</a></div>
                            <div class="btn">
                                <a href="#" title="播放"></a>
                                <a href="#" title="收藏"></a>
                            </div>
                        </div>
                    </div>
                    <ol>
                        <li>
                            <span style="color:#c10d0c;">1</span>
                            <a href="#"><i>2019</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">2</span>
                            <a href="#"><i>凝固的瞬间有火在烧</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span style="color:#c10d0c;">3</span>
                            <a href="#"><i>流浪</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <a href="#"><i>危险游戏</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <a href="#"><i>七年</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>6</span>
                            <a href="#"><i>混沌开 Burst into Chaos</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>7</span>
                            <a href="#"><i>真家伙</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>8</span>
                            <a href="#"><i>说不定我可以帮你</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>9</span>
                            <a href="#"><i>天鹅</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <span>10</span>
                            <a href="#"><i>一把火</i></a>
                            <div class="oper">
                                <a href="#"></a>
                                <a href="#"></a>
                                <a href="#"></a>
                            </div>
                        </li>
                        <li>
                            <a href="#">查看更多&gt;</a>
                        </li>
                    </ol>

                </div>
            </div> -->

            </div>
            <!-- 左侧 -->

            <!-- 右侧 -->
            <div class="dis_right">
                <div class="user-profile">
                    <p class="profile-option">
                        登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
                    </p>
                    <input type="button" id="login" value="用户登录">
                </div>

                <div class="singer" >
                      <!-- 入驻歌手 -->
                      <underlineTitle 
                      :name="name" 
                      :selectAll="selectAll"
                      />
                     <!-- 入驻歌手 -->
                    <ul class="siger-list">
                        <li>
                            <a href="#">
                                <div class="header">
                                    <img :src="require('@/assets/image/109951165588539704.jpg')" alt="">
                                </div>
                                <div class="info">
                                    <div class="info-name">
                                        张惠妹aMEI
                                    </div>
                                    <div class="thide">
                                        台湾歌手张惠妹
                                    </div>
                                </div>
                            </a>
                        </li>

                        <!-- <li><a href="#">
                            <div class="header">
                                <img src="../images/109951166047225823.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="info-name">
                                    Fine乐团
                                </div>
                                <div class="thide">
                                    独立音乐人
                                </div>
                            </div>
                        </a></li>

                    <li><a href="#">
                            <div class="header">
                                <img src="../images/109951162916034289.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="info-name">
                                    萬曉利
                                </div>
                                <div class="thide">
                                    民谣歌手、中国现代民谣的代表人物之一
                                </div>
                            </div>
                        </a></li>

                    <li><a href="#">
                            <div class="header">
                                <img src="../images/18806046882229308.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="info-name">
                                    音乐人赵雷
                                </div>
                                <div class="thide">
                                    民谣歌手
                                </div>
                            </div>
                        </a></li> -->
                    </ul>

                    <a href="#" class="become">
                        <span>申请成为网易音乐人</span>
                    </a>

                </div>

                <div class="anchor">
                    <div class="v-d4">
                        <span>热门主播</span>
                    </div>

                    <ul class="anchor-list">
                        <li>
                        <a href="#">
                            <img class="header" :src="require('@/assets/image/1407374893913311.jpg')" alt="">
                            <div class="info">
                                <p class="name">陈立</p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </a>
                      </li>

                        <!-- <li>
                        <a href="#">
                            <img class="header" src="../images/109951164843970584.jpg" alt="">
                            <div class="info">
                                <p class="name">刘维-Julius</p>
                                <p class="thide">歌手、播客节目《维维道来》主理人</p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="header" src="../images/109951166943043252.jpg" alt="">
                            <div class="info">
                                <p class="name">莫非定律MoreFeel</p>
                                <p class="thide">男女双人全创作独立乐团</p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="header" src="../images/109951165825466770.jpg" alt="">
                            <div class="info">
                                <p class="name">碎嘴许美达</p>
                                <p class="thide">脱口秀网络红人</p>
                            </div>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="header" src="../images/109951163676573083.jpg" alt="">
                            <div class="info">
                                <p class="name">银临Rachel</p>
                                <p class="thide">古风音乐人</p>
                            </div>
                        </a>
                    </li> -->
                    </ul>



                </div>
            </div>
            <!-- 右侧 -->
        </div>
    </div>
</template>

<script>
import underlineTitle from '@/components/underlineTitle'
import optionTitle from '@/components/optionTitle'
import carousel from '@/components/carousel/index.vue'

import banner from '@/config/banner'
import optionTitleProps from '@/config/optionTitleProps'
export default {
    components: { carousel,optionTitle,underlineTitle},
    data() {
        return {
            banner,
            //     幻灯片时长
            carouseTime: 2000,
            //    幻灯片起始下标
            activeIndex: 0,
            list : optionTitleProps.list,
            separator : optionTitleProps.separator,
            more : optionTitleProps.more,
            title : optionTitle.title ,
            name : '入驻歌手',
            selectAll : '选择全部'
        }
    },
    methods: {
        downloadHandle() {
            this.$router.push('/downloadClient')
        }
    }
}
</script>

<style lang="scss" scoped>
.discovers {
    width: 982px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
    display: flex;
    margin-bottom: 80px;

    .dis_left {
        width: 727px;
        padding: 20px;

        .option-title {
            height: 33px;
            padding: 0 10px 0 34px;
            border-bottom: 2px solid #C10D0C;
            display: flex;
            align-items: center;
            position: relative;
            background: url(@/assets/image/index.png) no-repeat -225px -153px;

            .title-item {
                font-size: 20px;
                font-weight: normal;
                line-height: 28px;
            }

            ul {
                margin-left: 20px;

                li {
                    float: left;
                    font-size: 12px;
                    margin: 7px 0 0 20px;
                    margin-left: 10px;

                    a {
                        color: #666;
                        text-decoration: none;
                        &:hover{
                          text-decoration: underline;
                        }
                    }
                    span{
                        margin: 0 10px;
                        color: #ccc;
                    }
                }
            }

            .more{
                position: absolute;
                font-size: 12px;
                color: #666;
                right: 0;
                cursor: pointer;
                &:hover{
                    text-decoration: underline;
                }
                li{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin-left: 4px;
                    vertical-align: middle;
                    background: url(@/assets/image/index.png) no-repeat 0 9999px;
                    background-position: 0 -240px;
                }
            }
        }

        .music-box{
                margin: 20px 0 0 -42px;
                li{
                    list-style: none;
                    width: 141px;
                    height: 204px;
                    padding-left: 42px;
                    display: inline-block;
                    overflow: hidden;
                    padding: 0 0 30px 40px;
                    line-height: 1.4;
                    text-align: center;
                    float: left;
                    .u-cover{
                            width: 140px;
                            height: 140px;
                            background-color: aqua;
                            position: relative;
                            .u-cover-bottom{
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                height: 27px;
                                line-height: 27px;
                                background-position: 0 -537px;
                                color: #ccc;
                                background-color: rgba(0,0,0,.4);
                                .icon-headset{
                                    float: left;
                                    width: 14px;
                                    height: 11px;
                                    background: url(@/assets/image/iconall.png);
                                    background-position: 0 -24px;
                                    margin: 9px 5px 9px 10px;
                                }
                                .num{
                                    font-size: 12px;
                                    margin-left: -80px;
                                }
                                .icon-play{
                                    display: inline-block;
                                    width: 16px;
                                    height: 17px;
                                    background: url(@/assets/image/iconall.png);
                                    background-position: 0 0;
                                    position: absolute;
                                    right: 10px;
                                    bottom: 5px;
                                    &:hover{
                                        background: url(@/assets/image/iconall_8.png);
                                        background-position: 0 -59px;
                                    }
                                }
                            }
                        }
                    p{
                        margin: 8px 0 3px;
                        font-size: 14px;
                        height: 58px;
                        overflow: hidden;
                    }
                 }
            }
    }

    .dis_right {
        width: 253px;
        border-left: 1px solid #d3d3d3;

        .user-profile {
            height: 115px;
            background: url(@/assets/image/index.png);
            background-position: 0 0;
            text-align: center;
            padding: 10px 10px;

            .profile-option {
                font-size: 12px;
                color: #666;
                line-height: 25px;
            }

            input[type='button'] {
                width: 100px;
                height: 31px;
                line-height: 31px;
                text-align: center;
                background-color: #c20c0c;
                color: #fff;
                text-shadow: 0 1px 0 #8a060b;
                margin-top: 10px;
                outline: none;
                border: 0;
                font-size: 12px;
                border-radius: 5px;
                cursor: pointer;

                &:hover {
                    background-color: #a40011;
                }
            }
        }

        .singer{
          margin-top: 15px;
          
         .siger-list{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                li{
                    list-style: none;
                    width: 210px;
                    height: 62px;
                    background: #fafafa;
                    margin-top: 14px;
                    a{
                        width: 100%;
                        display: flex;
                        font-size: 14px;
                        text-decoration: none;
                        .header{
                            width: 62px;
                            height: 62px
                        }
                        .info{
                            width: 133px;
                            height: 60px;
                            padding-left: 14px;
                            border: 1px solid #e9e9e9;
                            border-left: none;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            .info-name{
                                width: 90%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-top: 8px;
                                font-weight: bold;
                                color: #000;
                            }
                            .thide{
                                width: 90%;
                                margin-top: 8px;
                                color: #666;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
          .become{
            display: block;
            width: 210px;
            height: 31px;
            margin-left: 20px;
            border-radius: 4px;
            color: #333;
            text-decoration: none;
            text-align: center;
            white-space: nowrap;
            margin-top: 10px;
            /* background-position: right -100px;
            text-decoration: none;
            white-space: nowrap;
            vertical-align: top;
            text-align: center; */
            background: url(@/assets/image/button2.png);
            background-repeat: no-repeat;
            background-size:cover;
            /* background-color: #a40011; */
            font-size: 12px;
            background-position: 0px -1517px;
        /* background-color: #f5f5f5; */
        &:hover{
                background-color: (255,255,255,.4);
            }
            span{

                display: block;
                height: 31px;
                background: url(@/assets/image/button2.png);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: -1px -1551px;
                line-height: 31px;
                font-weight: bold;
                
            }
    }
       }
       .anchor{
        margin-top: 15px;
        .v-d4{
                height: 23px;
                margin: 0 20px;
                border-bottom: 1px solid #ccc;
                color: #333;
                font-size: 12px;
                margin-top: 25px;
            }
            .anchor-list{
                width: 100%;
                display: flex;
                flex-direction: column;
                /* justify-content: center; */
                align-items: center;
                li{
                list-style: none;
                width: 210px;
                height: 50px;
                    a{
                        display: flex;
                        text-decoration: none;
                        align-items: center;
                        .header{
                            width: 40px;
                            height: 40px;
                            box-shadow: 0 0 1px #333333 inset;
                        }
                        .info{
                            width: 160px;
                            height: 60px;
                            padding-left: 15px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            font-size: 12px;
                            .name{
                              color: #000;
                            }
                           .thide{
                                    margin-top: 5px;
                                    color: #666;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                            }
                        }
                    }
                }
           }
        }
    }
}</style>